<template>
  <div>
    <el-descriptions title="车辆竞拍信息" style="margin-left: 112px;margin-top: 10px">
      <el-descriptions-item label="车辆名">{{carName}}</el-descriptions-item>
      <el-descriptions-item label="浏览量">{{views}}</el-descriptions-item>
      <el-descriptions-item label="收藏量">{{collects}}</el-descriptions-item>
    </el-descriptions>
    <el-table v-loading="loading" :data="auctionList" :row-class-name="tableRowClassName" style="width: 85%;margin: auto">
      <el-table-column label="用户名" align="center" prop="username" />
      <el-table-column label="出价" align="center" prop="price" />
      <el-table-column label="排名" align="center" prop="remark" />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      style="margin-right: 100px"
    />
  </div>
</template>

<script>
import {listAuction,selectCarName} from "@/api/scp/auction";
import {selectVisit} from "@/api/scp/visit";
export default {
  name: "auction",
  data(){
    return{
      loading: true,
      carName:"su7",
      //表格数据
      //后端传数据时，将数据按照价格进行排序，再进行前端数据渲染
      auctionList: [],
      views:1000,
      collects:99,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        settingName: null,
        content: null,
        sort: null,
      },
    }
  },
  created() {
    var carId = this.$route.query.carId||100

    this.getList();
    this.getCarName(carId);
    this.getView(carId)
  },
  methods:{
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 0 && this.queryParams.pageNum==1) {
        return 'first-row';
      }
      return '';
    },
    getList() {
      this.loading = true;
      listAuction(this.queryParams).then(response => {
        // this.auctionList = response.rows;
        // this.total = response.total;
        this.auctionList = response.data.content;
        this.total = response.data.totalElements
        this.loading = false;
      });
    },
    getCarName(carId){
      selectCarName(carId).then(res=>{
        this.carName = res.data.carName
      })
    },
    getView(carId){
      selectVisit(carId).then(res=>{
        this.views = res.data.view;
        this.collects = res.data.collect
      })
    }

  }
}
</script>

<style scoped>
::v-deep .el-table .first-row td {
  color: red; /* 设置第一行文字颜色为红色 */
  /*background-color: orange;*/
}
</style>
